<template>
  <div class="product-sorts">
    <!-- 商品导航 -->
    <div class="tab-container">
      <div class="tab-item" v-for="(item, index) in tabs" :key="index" @click="handleTabClick(item, index)"
        :class="{ 'active': activeIndex === index }">
        <div class="tab-text">{{ item.text }}</div>
      </div>
    </div>

    <div class="bc-img">
      <img src="../../../assets/imgs/new_products/bc_img.png" alt="横幅图片">
    </div>

    <div class="shop-products">
      <!-- 分类导航 - 可点击切换商品 -->
      <div class="products-wrapper">
        <div
          class="products-items"
          v-for="(item, index) in tabsSorts"
          :key="index"
          @click="switchCategory(index)"
          :class="{ 'active': currentCategoryIndex === index }"
        >
          <div class="tabs-text">{{ item.text }}</div>
        </div>
      </div>

      <!-- 商品展示区域 - 根据选中分类显示 -->
      <div class="products-display">
        <div class="cards" v-for="(product, pIndex) in currentCategoryProducts" :key="pIndex">
          <img :src="product.url" alt="商品图片">
          <div class="name-items">
            <div class="icon">
              <img :src="product.icon" alt="图标">
            </div>
            <div class="title">{{ product.title }}</div>
          </div>
          <span class="protect">{{ product.protect }}</span>
          <div class="price-items">
            <div class="price">￥{{ product.price }}</div>
            <div class="discount">{{ product.discount }}</div>
          </div>
        </div>

        <!-- 空状态提示 -->
        <div v-if="currentCategoryProducts.length === 0" class="empty-state">
          暂无{{ tabsSorts[currentCategoryIndex].text }}类商品
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import router from '@/router';
import { ref, computed } from 'vue';
import jdIcon from '@/assets/imgs/new_products/jd_icon.png';
import newImg1 from '@/assets/imgs/new_products/newproducts1.png';

// 所有商品数据，按分类划分
const allProducts = [
  {
    category: '推荐',
    items: [
      {
        url: newImg1,
        title: 'LEGENDSANDY蓝氏超能奶盾全价鲜肉低温烘焙猫粮500g',
        icon: jdIcon,
        protect: '7天无理由退货 | 7天价保',
        price: '29.9',
        discount: 'PLUS95折'
      },
      {
        url: newImg1,
        title: '蓝氏全价无谷鲜肉猫粮成猫幼猫通用',
        icon: jdIcon,
        protect: '7天无理由退货 | 7天价保',
        price: '89',
        discount: '满100减30'
      },
       {
        url: newImg1,
        title: 'LEGENDSANDY蓝氏超能奶盾全价鲜肉低温烘焙猫粮500g',
        icon: jdIcon,
        protect: '7天无理由退货 | 7天价保',
        price: '29.9',
        discount: 'PLUS95折'
      },
      {
        url: newImg1,
        title: '蓝氏全价无谷鲜肉猫粮成猫幼猫通用',
        icon: jdIcon,
        protect: '7天无理由退货 | 7天价保',
        price: '89',
        discount: '满100减30'
      }
    ],

  },
  {
    category: '鞋靴',
    items: [
      {
        url: newImg1,
        title: '运动鞋男夏季透气网面轻便跑步鞋',
        icon: jdIcon,
        protect: '7天无理由退货 | 7天价保',
        price: '199',
        discount: '限时8折'
      },
      {
        url: newImg1,
        title: '真皮马丁靴女春秋季英伦风短靴',
        icon: jdIcon,
        protect: '7天无理由退货 | 7天价保',
        price: '299',
        discount: '满200减50'
      }
    ]
  },
  {
    category: '箱包',
    items: [
      {
        url: newImg1,
        title: '商务公文包男士真皮手提包',
        icon: jdIcon,
        protect: '7天无理由退货 | 7天价保',
        price: '399',
        discount: 'PLUS会员专享'
      },
      {
        url: newImg1,
        title: '双肩包女大容量旅行背包',
        icon: jdIcon,
        protect: '7天无理由退货 | 7天价保',
        price: '159',
        discount: '买一送一'
      }
    ]
  }
];

// 分类导航数据
const tabsSorts = [
  { text: '推荐' },
  { text: '奢品' },
  { text: '男装' },
  { text: '文具' },
  { text: '配饰' },
  { text: '鞋靴' },
  { text: '宠物' },
  { text: '家居' },
  { text: '进口' },
  { text: '箱包' },
  { text: '潮玩' },
  { text: '健康' },
  { text: '家电' },
  { text: '运动' },
  { text: '三' },
];

// 顶部导航数据
const tabs = [
  { text: '全部商品分类', path: '/allSort' },
  { text: '大牌奥莱', path: '/allSort' },
  { text: '美妆馆', path: '/allSort' },
  { text: '超市', path: '/allSort' },
  { text: '生鲜', path: '/allSort' },
  { text: '京东国际', path: '/allSort' },
  { text: '拍卖', path: '/allSort' },
  { text: '金融', path: '/allSort' },
  { text: '京东五金城', path: '/allSort' },
];

// 状态管理
const activeIndex = ref(0);
const currentCategoryIndex = ref(0); // 当前选中的分类索引

// 获取当前分类对应的商品
const currentCategoryProducts = computed(() => {
  const categoryName = tabsSorts[currentCategoryIndex.value].text;
  // 在所有商品中查找对应分类
  const category = allProducts.find(item => item.category === categoryName);
  return category ? category.items : [];
});

// 处理顶部导航点击
const handleTabClick = (item, index) => {
  activeIndex.value = index;
  try {
    router.push(item.path)
      .then(() => console.log('跳转成功'))
      .catch(err => console.error('跳转失败:', err));
  } catch (err) {
    console.error('路由错误:', err);
  }
};

// 切换分类（核心功能）
const switchCategory = (index) => {
  currentCategoryIndex.value = index;
  // 滚动到商品区域
  document.querySelector('.products-display')?.scrollIntoView({
    behavior: 'smooth'
  });
};
</script>

<style scoped lang="scss">
.product-sorts {
  height: auto;
  width: 100%;
  box-sizing: border-box;
  background-color: rgb(242, 242, 242);

  .tab-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    border-bottom: 2px solid #e0e0e0;
    scrollbar-width: thin;
    background-color: #fff;

    &::-webkit-scrollbar {
      height: 4px;
    }

    &::-webkit-scrollbar-thumb {
      background-color: #ccc;
      border-radius: 2px;
    }

    .tab-item {
      flex-shrink: 0;
      cursor: pointer;

      .tab-text {
        padding: 6px 16px;
        white-space: nowrap;
        transition: all 0.2s ease;
      }
    }

    .tab-item.active .tab-text {
      background-color: rgb(243, 2, 19);
      color: white;
    }

    .tab-item:not(.active) .tab-text {
      color: #333;
    }
  }

  .bc-img {
    width: 100%;
    height: 82px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .shop-products {
    height: auto;
    padding: 0 100px;

    .products-wrapper {
      display: flex;
      justify-content: space-around;
      gap: 10px;
      background-color: #fff;
      padding: 10px 0;
      scrollbar-width: thin;

      &::-webkit-scrollbar {
        height: 4px;
      }

      &::-webkit-scrollbar-thumb {
        background-color: #ccc;
        border-radius: 2px;
      }
    }

    .products-items {
      flex-shrink: 0;
      cursor: pointer;
      padding: 8px 15px;
      border-radius: 4px;

      .tabs-text {
        white-space: nowrap;
        font-size: 14px;
      }

      &.active {
        color:rgb(22, 217, 183) !important;
        .tabs-text {
          font-weight: bold;
        }
      }


    }

    .products-display {
      background-color: #fff;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 15px;
      padding: 20px;
      min-height: 340px;

      .empty-state {
        grid-column: 1 / -1;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 340px;
        color: #999;
        font-size: 16px;
      }

      img {
        width: 240px;
        height: 240px;
        object-fit: cover;
      }

      .cards {
        .name-items {
          display: flex;
          align-items: center;
          gap: 5px;
          margin: 8px 0;

          .icon img {
            width: 36px;
            height: 19px;
          }

          .title {
            font-size: 14px;
            color: #333;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 200px;
          }
        }

        .protect {
          color: rgb(197, 146, 14);
          font-size: 12px;
          display: inline-block;
        }

        .price-items {
          display: flex;
          gap: 5px;
          align-items: center;
          margin-top: 5px;

          .price {
            font-size: 23.1816px;
            font-weight: 700;
            color: #f00;
          }

          .discount {
            font-size: 15px;
            color: rgb(255, 64, 4);
          }
        }
      }
    }
  }
}
</style>
